<!--  -->
<template>
  <div>
    <div class="nuxt">
      <div class="page">
        <div class="home-page home">
          <div data-v-aab73ce8="" class="activity">
            <div data-v-aab73ce8="" class="left">
              <div data-v-aab73ce8="" class="tab-names">
                <div data-v-aab73ce8="" class="tab-name active">
                  <div data-v-aab73ce8="" class="arrow animate-item" style="opacity: 1">
                    <svg
                      data-v-aab73ce8=""
                      xmlns="http://www.w3.org/2000/svg"
                      width="20"
                      height="20"
                      viewBox="0 0 20 20"
                      fill="none"
                    >
                      <path
                        data-v-aab73ce8=""
                        id="三角形 1"
                        fill-rule="evenodd"
                        transform="translate(0 0)  rotate(90 10 10)"
                        opacity="1"
                        d="M6.54,15L13.46,15C14.53,15 15.52,14.43 16.06,13.5C16.6,12.57 16.6,11.43 16.06,10.5L12.6,4.5C12.06,3.57 11.07,3 10,3C8.93,3 7.94,3.57 7.4,4.5L3.94,10.5C3.4,11.43 3.4,12.57 3.94,13.5C4.48,14.43 5.47,15 6.54,15Z "
                        style="fill: rgb(255, 87, 51)"
                      ></path>
                    </svg>
                  </div>
                  <div data-v-aab73ce8="" class="new"></div>
                  <div data-v-aab73ce8="" class="text-wrap">
                    <span data-v-aab73ce8="" class="">面向 coser 攝影 后期</span>
                  </div>
                </div>
              </div>
              <div data-v-aab73ce8="" class="left-content">
                <div data-v-aab73ce8="" class="animate-item active-bg" style=""></div>
                <div data-v-aab73ce8="" class="animate-item subtitle">
                  <div data-v-aab73ce8="" class="lv" style="background: rgb(42, 130, 228)">
                    零基础
                    <div
                      data-v-aab73ce8=""
                      class="triangle"
                      style="background: rgb(42, 130, 228)"
                    ></div>
                  </div>
                  <div data-v-aab73ce8="" class="text">进阶</div>
                </div>
                <div data-v-aab73ce8="" class="text-wrapper">
                  <div data-v-aab73ce8="" class="text-content">
                    <div data-v-aab73ce8="" class="animate-item title">让群星来揭示命运</div>
                    <div data-v-aab73ce8="" class="animate-item desc"></div>
                  </div>
                </div>
              </div>
            </div>
            <div data-v-aab73ce8="" class="right">
              <div data-v-aab73ce8="" class="right-content">
                <div data-v-aab73ce8="" class="right-content__bg"></div>
                <div data-v-aab73ce8="" class="team-1">
                  <div data-v-aab73ce8="" class="team-mark">
                    <div
                      alt=""
                      class="w-40 h-40 absolute top-0 left-16 rounded-3xl drop-shadow-lg bg-yellow-500"
                    >
                      <img src="@/assets/img/ic1.svg" alt="" srcset="" />
                    </div>
                  </div>
                  <div data-v-aab73ce8="" class="text-wrapper">
                    <div data-v-aab73ce8="" class="team-name">
                      GET <span data-v-aab73ce8="">SOFTWARE</span> PACKAGE
                    </div>

                    <div class="flex text-base space-x-3">
                      <div
                        @click="downLoad('web')"
                        class="bg-[#262626] hover:bg-[#323131] px-4 py-2 rounded-2xl cursor-pointer"
                      >
                        PSDLink_网页版
                      </div>
                      <div
                        @click="downLoad('api')"
                        class="bg-[#262626] hover:bg-[#323131] px-4 py-2 rounded-2xl cursor-pointer"
                      >
                        PSDLink_API
                      </div>
                    </div>
                  </div>
                </div>
                <div data-v-aab73ce8="" class="team-2">
                  <img data-v-aab73ce8="" src="@/assets/img/team_bg.3fcec8f.webp" alt="bg" />
                  <div data-v-aab73ce8="" class="text-wrapper">
                    <div
                      alt=""
                      class="w-40 h-40 absolute -top-10 right-5 rounded-3xl drop-shadow-lg bg-[#001e36] leading-[10rem]"
                    >
                      <div class="text-[5rem] text-center text-[#31a8ff]">PS</div>
                    </div>
                    <div data-v-aab73ce8="" class="team-name">
                      <span data-v-aab73ce8=""> PHOTOSHOP </span> PLUGIN
                    </div>
                    <div data-v-aab73ce8="" class="join" @click="downLoad('ps')">下载PS插件</div>
                    <div data-v-aab73ce8="" class="desc"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tools mx-6">
            <div class="tool-group-wrapper w-full text-gray-100">
              <div class="tool-group">
                <div
                  class="tool-item select-none"
                  v-for="(item, index) in childTabs"
                  :key="index"
                  @click="router.push(item.path)"
                >
                  <div class="left">
                    <div class="title">{{ item.title }}</div>
                    <div class="name">{{ item.name }}</div>
                    <div class="enName">{{ item.enName }}</div>
                    <div class="desc">{{ item.desc }}</div>
                  </div>
                  <div class="right">
                    <img :src="item.image" alt="image" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="page-content">
            <div class="menu">
              <ul>
                <li
                  :class="activeExmTab == item.value ? 'selected' : ''"
                  @click="changeTab(item.value)"
                  v-for="(item, index) in exmTabs"
                  :key="index"
                >
                  <em class="iconfont icon-a-sanjiaoxing1"></em>
                  <div class="text">
                    {{ item.label }}
                    <div class="bottom"></div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="all-paintings">
              <div class="right-paintings">
                <div class="water-flow" v-if="activeExmTab == 0">
                  <PicView />
                </div>
                <div class="water-flow" v-if="activeExmTab == 2">
                  <AppAction />
                </div>
                <div class="water-flow" v-if="activeExmTab == 3">
                  <SomeWords />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import PicView from '@/components/exmTabs/picView.vue'
import AppAction from '@/components/exmTabs/appAction.vue'
import SomeWords from '@/components/exmTabs/someWords.vue'
import { useCounterStore } from '@/stores/counter'
import { useRouter } from 'vue-router'
const router = useRouter()
const activeExmTab = ref(0)
const { downLoad } = useCounterStore()
const changeTab = (item: number) => {
  activeExmTab.value = item
}
const exmTabs = reactive([
  { label: '讲师作品', value: 0, icon: 'icon-image' },
  { label: '工具演示', value: 2, icon: 'icon-arrow-top' },
  { label: '一点碎碎念', value: 3, icon: 'icon-house' }
])

const childTabs = ref([
  {
    title: '修图',
    name: 'PS+AI零基础特效速成班',
    enName: '',
    desc: 'Basic AI Assisted Post Course',
    image: 'https://ocdn.aigodlike.com/resource/homepage/card/1681164287659212800',
    path: { name: 'PsAi01' }
  },
  {
    title: 'AI',
    name: '三七AI辅助课',
    enName: '',
    desc: 'SANQI PS & AI',
    image: 'https://ocdn.aigodlike.com/resource/homepage/card/1681148491172151296',
    path: { name: 'PsAi02' }
  },
  {
    title: '速成',
    name: 'Ai photo retouching course',
    enName: '',
    desc: '无需基础·无需配置·从零开始·即刻上手',
    image: 'https://ocdn.aigodlike.com/resource/homepage/card/1682404919157456896',
    path: { name: 'PsAi03' }
  },
  {
    title: '全流程',
    name: '全流程前后期课',
    enName: '',
    desc: '后期/前期/全流程',
    image: 'https://ocdn.aigodlike.com/resource/homepage/card/1697789304052383744',
    path: { name: 'PsAi04' }
  }
])

// const normalClick = () => {
//   ElMessage.warning('敬请期待~')
// }
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.nuxt {
  display: flex;
  min-height: 100vh;

  .page {
    flex: 1;
    min-height: 636px;
  }
}

.page-content {
  margin-left: 1rem;
  margin-right: 1rem;
  display: flex;
  flex-direction: column;

  .menu {
    display: flex;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    align-items: center;
    justify-content: center;

    color: #a6a6a6;
    font-size: 2em;
    padding-top: 40px;
    height: 132px;

    ul {
      position: relative;
      display: flex;
      align-items: flex-end;
      gap: 60px;

      li {
        display: flex;
        cursor: pointer;
        align-items: center;
        transition: 0.2s;

        em {
          opacity: 0;
          transition: 0.2s;
          margin-right: 0.5vw;
        }

        .text {
          position: relative;
          justify-content: center;
          white-space: nowrap;

          .bottom {
            position: absolute;
            left: 50%;
            bottom: -5px;
            transform: translateX(-50%);
            width: 0;
            height: 5px;
            border-radius: 30px;
            background: #fff;
            transition: 0.3s;
          }
        }

        &:hover {
          color: hsla(0, 0%, 100%, 0.8);

          em {
            opacity: 1;
          }
        }
      }

      .selected {
        color: #fff !important;
        transform: scale(1.2) translateY(-5px);

        em {
          color: #ff5733;
          opacity: 1;
        }

        .text {
          .bottom {
            width: 100%;
          }
        }
      }
    }
  }
}

.tools {
  .tool-group-wrapper {
    overflow: hidden;
  }

  .tool-group {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5vw;
    height: 100%;
    margin-bottom: 1.5vw;
    transition: all 0.3s ease;

    .tool-item {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 23vw;
      height: 100%;
      min-width: 334px;
      padding: 1vw 0.7vw 1.6vw 1.4vw;
      border-radius: 30px;
      background: #383838;
      font-weight: 400;

      &:hover {
        .left {
          .title {
            background: #262626;
          }

          .name {
            transform: scale(1.1);

            &:before {
              width: 100%;
            }
          }
        }

        .right {
          img {
            transform: scale(1.1);
          }

          .arrow-wrapper {
            display: flex;
          }

          .left-arrow,
          .right-arrow {
            opacity: 1;
          }

          button {
            display: flex;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            border-radius: 9999px;
            --tw-bg-opacity: 1;
            background-color: rgba(26, 27, 28, var(--tw-bg-opacity));
            padding-left: 2rem;
            padding-right: 2rem;
            font-weight: 700;
            --tw-text-opacity: 1;
            color: rgba(255, 255, 255, var(--tw-text-opacity));
            outline: 2px solid transparent;
            outline-offset: 2px;
          }
        }
      }
    }
  }
}

.animate-item.active-bg {
  background: url('@/assets/img/viewImg/pic006.png') center center / cover no-repeat;
}

.team-mark {
  width: 310px;
}
</style>
